<style lang="less">
@import './login.less';
</style>

<template>
  <div class="login">
    <div class="login-con">
      <Card icon="log-in"
            title="欢迎登录"
            :bordered="false">
        <div class="form-con">
          <Form ref="loginForm"
                :model="form"
                :rules="rules"
                @keydown.enter.native="handleSubmit">
            <FormItem prop="phone">
              <Input v-model="form.phone"
                     placeholder="请输入手机号">
              <span slot="prepend">
                      <Icon type="md-tablet-portrait" :size="14" />
              </span>
              </Input>
            </FormItem>
            <FormItem prop="code">
              <div style="display: flex;align-items: center;"> <Input type="text"
                       style="width:220px"
                       v-model="form.code"
                       placeholder="请输入验证码">
                <span slot="prepend">
                    <Icon type="md-mail" :size="14" />
                </span>
                </Input>
                <Button style="height:32px;margin-left:10px"
                        :disabled="!!cooling"
                        @click="getCaptcha"> {{ cooling ? "重新发送(" + cooling + ")" : "获取验证码" }}</Button>
              </div>
              <!-- <Input type="code" v-model="form.code" placeholder="请输入验证码">
                <span slot="prepend">
                  <Icon :size="14" type="md-lock"></Icon>
                </span>
              </Input> -->
            </FormItem>
            <div style="text-align:right;"><a @click="goForgetPwd">忘记密码？</a></div>

            <FormItem>
              <Button @click="handleSubmit"
                      type="primary"
                      long>登录</Button>
            </FormItem>

          </Form>
        </div>
      </Card>

    </div>
  </div>
</template>

<script>
import Cookies from 'js-cookie'
// import LoginForm from '_c/login-form';
import { sendSms } from '@/api/user'
import { mapActions } from 'vuex'
import store from '@/store/'
export default {
  // components: {
  //   LoginForm
  // },
  props: {
    userNameRules: {
      type: Array,
      default: () => {
        return [{ required: true, message: '账号不能为空', trigger: 'blur' }]
      }
    },
    passwordRules: {
      type: Array,
      default: () => {
        return [{ required: true, message: '密码不能为空', trigger: 'blur' }]
      }
    }
  },
  data () {
    return {
      errNum: 0,
      form: {
        username: 'admin',
        password: '',
        codeKey: '',
        code: ''
      },
      cooling: 0
    }
  },
  computed: {
    showKaptcha () {
      // `this` 指向 vm 实例
      let result = this.$store.state.user.showKaptcha > 0
      // console.log(999,result);
      return result
    },
    rules () {
      return {
        username: this.userNameRules,
        password: this.passwordRules
      }
    }
  },
  methods: {
    ...mapActions(['handleLoginSms', 'getUserInfo', 'handleArea']),
    initVcode () {
      let rnd = Math.random().toString() + new Date().getTime()
      this.form.codeKey = rnd
    },
    getCaptcha () {
      const phone = this.form.phone.trim()
      // 获取验证码
      sendSms({ phone }).then((res) => {
        res = res.data
        if (res.code == 0) {
          this.cooling = 60
          let coolingInter = setInterval(() => {
            if (this.cooling > 0) {
              this.cooling--
            } else {
              clearInterval(coolingInter)
            }
          }, 1000)
          const xPhone = phone.slice(0, 3) + 'xxxx' + phone.slice(7)
          this.$Notice.success({
            title: '验证码',
            desc: `验证码已发送至${xPhone}`,
            duration: 5
          })
        } else {
          this.$Notice.error({ desc: res.message })
        }
      })
    },
    goForgetPwd () {
      this.$router.push({ name: 'forgetPwd' })
    },
    handleSubmit () {
      this.$refs.loginForm.validate(async (valid) => {
        if (valid) {
          let data = await this.handleLoginSms(this.form)
          if (data.code == 0) {
            // success
            let res = await this.getUserInfo()
            this.$store.dispatch('store_showKaptcha', null)
            await this.handleArea() // get area
            if (res.distid == '330101') {
              this.$router.push({ name: 'ROLE_check' })
            } else {
              this.$router.push({ name: this.$config.homeName })
            }
          } else {
            this.errNum++
            this.$Message.error(data.message)
            if (this.errNum === 3) {
              this.$store.dispatch('store_showKaptcha', 1)
            }
            this.errorTime++
            this.form.username = ''
            this.form.password = ''
            this.form.code = ''
            this.initVcode()
          }
        }
      })
    }
  },
  created () {
    this.initVcode()
  }
}
</script>

<style>
</style>
